<template>
    <div id="airtagH">
        <div class="buy-hermes" v-if="imgData">
            <div class="buy-hermes-head">
                <div class="buy-hermes-center980">
                    <h2>配件</h2>
                </div>
            </div>
            <div class="buy-hermes-allmesg">
                <div class="buy-hermes-center980">
                    <div class="buy-hermes-content">
                        <!-- 选择商品信息区 -->
                        <div class="buy-hermes-inform" v-if="productData">
                            <div class="buy-hermes-inf-head">
                                <h2 v-if="now==-1">AirTag 皮革扣环 - 鞍褐色</h2>
                                <h2 v-else>{{proTitle}}</h2>
                                <span v-if="now==-1">RMB 299</span>
                                <span v-else>RMB {{proPrice}}</span>
                            </div>
                            <div class="buy-hermes-inf-color">
                                <h3 v-if="now==-1">颜色 - 鞍褐色</h3>
                                <h3 v-else>颜色 - {{productData.data.productSet[now].color}}</h3>
                                <ul>
                                    <li v-for="(color,i) in productData.data.productSet"
                                        :key="i"
                                        @click="selectColor(i)"
                                        :class="{active:now==i}">
                                        <img :src="color.colorImg"
                                            width="32"
                                            height="32"/>
                                    </li>
                                    <!-- <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'MM043_SW_COLOR.jfif'
                                                )
                                            "
                                            width="32"
                                            height="32"
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'MM013_SW_COLOR.jfif'
                                                )
                                            "
                                            width="32"
                                            height="32"
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'MM023_SW_COLOR.jfif'
                                                )
                                            "
                                            width="32"
                                            height="32"
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'MK0V3_SW_COLOR.jfif'
                                                )
                                            "
                                            width="32"
                                            height="32"
                                        />
                                    </li> -->
                                </ul>
                            </div>
                            <div class="buy-hermes-otherinf">
                                <!-- svg -->
                                <div>
                                    <svg
                                        viewBox="0 0 25 25"
                                        role="img"
                                        aria-hidden="true"
                                        width="25px"
                                        height="25px"
                                    >
                                        <path
                                            fill="none"
                                            d="M0 0h25v25H0z"
                                        ></path>
                                        <path
                                            d="M18.5 5h-1.775a4.231 4.231 0 00-8.45 0H6.5A2.5 2.5 0 004 7.5v11A2.5 2.5 0 006.5 21h12a2.5 2.5 0 002.5-2.5v-11A2.5 2.5 0 0018.5 5zm-6-3a3.245 3.245 0 013.225 3h-6.45A3.245 3.245 0 0112.5 2zM20 18.5a1.5 1.5 0 01-1.5 1.5h-12A1.5 1.5 0 015 18.5v-11A1.5 1.5 0 016.5 6h12A1.5 1.5 0 0120 7.5z"
                                        ></path>
                                        <path
                                            d="M14.4 12.448a1.592 1.592 0 01.738-1.328 1.607 1.607 0 00-1.37-.687c-.52 0-.941.317-1.22.317s-.663-.3-1.129-.3a1.861 1.861 0 00-1.739 2.068 4.32 4.32 0 00.723 2.3c.346.491.648.883 1.084.883s.617-.287 1.144-.287c.55 0 .663.279 1.137.279s.791-.43 1.084-.853a3.24 3.24 0 00.474-.989 1.516 1.516 0 01-.926-1.403zM12.583 10.357a1.346 1.346 0 00.941-.5 1.594 1.594 0 00.361-.974.731.731 0 00-.008-.136 1.5 1.5 0 00-1.016.528 1.547 1.547 0 00-.384.943c0 .053.008.106.008.128.03.004.06.011.098.011z"
                                        ></path>
                                    </svg>
                                </div>
                                <span>立即订购。有货</span>
                            </div>
                            <div class="buy-hermes-buyBtn">
                                <button @click="addToShopBag">添加到购物袋</button>
                                <div class="buy-hermes-save">
                                    <div>
                                        <span>还拿不定主意？</span>
                                        <span
                                            >将此商品收藏到清单，方便回头再来挑选。</span
                                        >
                                    </div>
                                    <div>
                                        <svg
                                            width="35"
                                            height="35"
                                            role="img"
                                            aria-hidden="true"
                                        >
                                            <path
                                                fill="none"
                                                d="M0 0h35v35H0z"
                                            ></path>
                                            <path
                                                fill="#06c"
                                                d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
                                            ></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 图片展示区 -->
                        <div class="buy-hermes-imgNav" v-if="productData">
                            <!-- 头图 大图 -->
                            <div>
                                <img
                                    :src="encodeImgUrl('MX4A2.jfif')"
                                    height="572"
                                    width="572" v-if="now==-1"/>
                                  <img
                                    :src="productData.data.productSet[now].proImgs[bigSmallnow]"
                                    height="572"
                                    width="572" v-else/>
                            </div>
                            <!-- 三个小图 -->
                            <div>
                                <ul class="buy-hermes-imgNav-3img" v-if="now!=-1">
                                    <li v-for="(img,i) in productData.data.productSet[now].proImgs"
                                    :key="i"
                                    @click="bigSmallnow=i"
                                    :class="{active:bigSmallnow==i}">
                                        <img
                                            :src="img"
                                            alt=""
                                            width="38"
                                            height="38"
                                        />
                                    </li>
                                    <!-- <li>
                                        <img
                                            :src="
                                                encodeImgUrl('MX4A2_AV1.jfif')
                                            "
                                            alt=""
                                            width="38"
                                            height="38"
                                        />
                                    </li>
                                    <li class="active">
                                        <img
                                            :src="
                                                encodeImgUrl('MX4A2_AV2.jfif')
                                            "
                                            alt=""
                                            width="38"
                                            height="38"
                                        />
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="buy-hermes-mayYouLike">
                <div class="buy-hermes-center980">
                    <div>
                        <h2>你可能还会喜欢</h2>
                    </div>
                    <div class="buy-hermes-mayYouLike-itemlist">
                        <ul>
                            <li class="buy-hermes-mayYouLike-item">
                                <img
                                    :src="
                                        encodeImgUrl(
                                            'airtag-single-select-202104.jfif'
                                        )
                                    "
                                    width="200"
                                    height="200"
                                />
                                <span class="buy-hermes-mayYouLike-item-t"
                                    ><router-link to="/byairtag">AirTag</router-link></span
                                >
                                <span class="buy-hermes-mayYouLike-item-p"
                                    >RMB 229</span
                                >
                            </li>

                            <li class="buy-hermes-mayYouLike-item">
                                <img
                                    :src="
                                        encodeImgUrl(
                                            'airtag-4pack-select-202104.jfif'
                                        )
                                    "
                                    width="200"
                                    height="200"
                                />
                                <span class="buy-hermes-mayYouLike-item-t"
                                    ><router-link to="/byairtag">AirTag 四件装</router-link></span
                                >
                                <span class="buy-hermes-mayYouLike-item-p"
                                    >RMB 779</span
                                >
                            </li>
                            <li class="buy-hermes-mayYouLike-item">
                                <img
                                    :src="
                                        encodeImgUrl(
                                            'homepod-mini-202110-gallery-1.jfif'
                                        )
                                    "
                                    width="200"
                                    height="200"
                                />
                                <span class="buy-hermes-mayYouLike-item-t"
                                    ><router-link to="/homepodMini"
                                        >HomePod mini</router-link
                                    ></span
                                >
                                <span class="buy-hermes-mayYouLike-item-p"
                                    >RMB 749 起</span
                                >
                                <ul>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'homepod-mini-finish-yellow.png'
                                                )
                                            "
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'homepod-mini-finish-blue.png'
                                                )
                                            "
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'homepod-mini-finish-orange.png'
                                                )
                                            "
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'homepod-mini-finish-white.png'
                                                )
                                            "
                                        />
                                    </li>
                                    <li>
                                        <img
                                            :src="
                                                encodeImgUrl(
                                                    'homepod-mini-finish-space-grey.png'
                                                )
                                            "
                                        />
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <msg-mask ref="msgMaskbtn" />
    </div>
</template>

<script>
import MsgMask from '@/components/MsgMask.vue';
export default {
    components: { MsgMask },
    data() {
        return {
            imgData: null,
            productData: null,
            userBagData:null,
            now:-1,
            //控制大小图切换的变量
            bigSmallnow:0,
            proTitle:'',
            proPrice:0,
            proImg:'',

        };
    },
    computed: {
        encodeImgUrl() {
            return function (imgName) {
                return this.imgBaseUrl + this.imgData[imgName];
            };
        },
    },
    methods: {
      getImgData() {
            let url = "http://localhost:3000/HYLImg";
            axios.get(url).then((res) => {
                this.imgData = res.data;
            });
      },
      getProductData() {
            let url = `http://localhost:3000/product/12`;
            axios.get(url).then((res) => {
                this.productData = res.data;
                console.log(res.data);
            });
      },
      selectColor(i){
        this.now = i;
        this.bigSmallnow = 0;

        let nowP = this.productData.data.productSet[this.now];
        this.proTitle = 'AirTag 皮革扣环 - '+ nowP.color
        this.proPrice = nowP.price;
        this.proImg = nowP.proImgs[0];
      },
      addToShopBag() {
            let user = sessionStorage.getItem("user");
            //判断是否选择了商品
            if (this.now < 0) {
                return;
            }
            // 判断是否登录过，否则就直接返回到登录页面
            if (user == "" || !user) {
                this.$refs.msgMaskbtn.setInformation({
                    title: "未登录",
                    // btnTitle:'去登陆',
                    callback() {
                        this.$router.push("/login");
                    },
                });
                this.$refs.msgMaskbtn.showbtnMask();
                return;
            }

            //解析json字符串为js对象
            user = JSON.parse(user);

            //用户信息已经拿到了,接下来是拿到用户购物袋的信息
            let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
            axios.get(userurl).then((res) => {
                this.userBagData = res.data;

                let seemProduct = this.checkProductNum(this.proTitle);

                //商品在数据库里的数量如果不等于空
                //就代表着有重复着的数据
                if (seemProduct != null) {
                    let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
                    seemProduct.num += 1;
                    // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
                    // 另外需要将对象里的num数量+1
                    axios.put(url2, seemProduct).then((res) => {
                        this.$refs.msgMaskbtn.setInformation({
                            title: "添加商品成功",
                        });
                        this.$refs.msgMaskbtn.showbtnMask();
                    });
                } 
                else {
                    //这里是没找到重复商品的操作
                    //正常的添加操作 post
                    let url = `http://localhost:3000/user/${user.id}/shopBagList`;
                    axios.post(url, {
                            title: this.proTitle,
                            price: this.proPrice,
                            img: this.proImg,
                            num: 1, //默认的参数 已添加为1
                            //post的参数是一个对象，里面只接受四个参数
                        })
                        .then((res) => {
                            this.$refs.msgMaskbtn.setInformation({
                                title: "添加商品成功",
                            });
                            this.$refs.msgMaskbtn.showbtnMask();
                        });
                }
            });
      },
      checkProductNum(proTitle) {
            //检查用户列表下的商品数量
            //返回值 重复的商品对象
            //参数，需要进行检查的商品标题
            for (const e of this.userBagData) {
                if (e.title == proTitle) {
                    return e;
                }
            }
            return null;
      },
    },
    mounted() {
        this.getImgData();
        this.getProductData();
    },
};
</script>

<style lang="less" scoped>
#airtagH {
    width: 100%;
    height: 100%;
}
</style>
<style scoped src="../assets/css/airTag-hermes.css"></style>
